'use client';

import React from 'react';

import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';

import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
import {
  type PlateEditor,
  ParagraphPlugin,
  focusEditor,
  useEditorRef,
} from '@udecode/plate-common/react';
import { DatePlugin } from '@udecode/plate-date/react';
import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
import { HEADING_KEYS } from '@udecode/plate-heading';
import { TocPlugin } from '@udecode/plate-heading/react';
import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';
import { LinkPlugin } from '@udecode/plate-link/react';
import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
import { TablePlugin } from '@udecode/plate-table/react';
import { TogglePlugin } from '@udecode/plate-toggle/react';
import {
  CalendarIcon,
  ChevronRightIcon,
  Columns3Icon,
  FileCodeIcon,
  FilmIcon,
  Heading1Icon,
  Heading2Icon,
  Heading3Icon,
  ImageIcon,
  Link2Icon,
  ListIcon,
  ListOrderedIcon,
  MinusIcon,
  PenToolIcon,
  PilcrowIcon,
  PlusIcon,
  QuoteIcon,
  SquareIcon,
  TableIcon,
  TableOfContentsIcon,
} from 'lucide-react';

import {
  insertBlock,
  insertInlineElement,
} from '@/components/editor/transforms';

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
  useOpenState,
} from './dropdown-menu';
import { ToolbarButton } from './toolbar';
import { useFilePicker } from 'use-file-picker';

type Group = {
  group: string;
  items: Item[];
};

interface Item {
  icon: React.ReactNode;
  onSelect: (editor: PlateEditor, value: string) => void;
  value: string;
  focusEditor?: boolean;
  label?: string;
}

export function InsertDropdownMenu(props: DropdownMenuProps) {
  const editor = useEditorRef();
  const openState = useOpenState();

  const { openFilePicker } = useFilePicker({
    accept: '*',
    multiple: true,
    onFilesSelected: ({ plainFiles: updatedFiles }) => {
      (editor as any).tf.insert.media(updatedFiles);
    },
  });

  const groups: Group[] = [
    {
      group: '文本',
      items: [
        {
          icon: <PilcrowIcon />,
          label: '正文',
          value: ParagraphPlugin.key,
        },
        {
          icon: <Heading1Icon />,
          label: '标题 1',
          value: HEADING_KEYS.h1,
        },
        {
          icon: <Heading2Icon />,
          label: '标题 2',
          value: HEADING_KEYS.h2,
        },
        {
          icon: <Heading3Icon />,
          label: '标题 3',
          value: HEADING_KEYS.h3,
        },
        {
          icon: <TableIcon />,
          label: '表格',
          value: TablePlugin.key,
        },
        {
          icon: <FileCodeIcon />,
          label: '代码块',
          value: CodeBlockPlugin.key,
        },
        {
          icon: <QuoteIcon />,
          label: '引用',
          value: BlockquotePlugin.key,
        },
        {
          icon: <MinusIcon />,
          label: '分割线',
          value: HorizontalRulePlugin.key,
        },
      ].map((item) => ({
        ...item,
        onSelect: (editor, value) => {
          insertBlock(editor, value);
        },
      })),
    },
    {
      group: '列表',
      items: [
        {
          icon: <ListIcon />,
          label: '无序列表',
          value: ListStyleType.Disc,
        },
        {
          icon: <ListOrderedIcon />,
          label: '有序列表',
          value: ListStyleType.Decimal,
        },
        {
          icon: <SquareIcon />,
          label: '任务列表',
          value: INDENT_LIST_KEYS.todo,
        },
        {
          icon: <ChevronRightIcon />,
          label: '折叠列表',
          value: TogglePlugin.key,
        },
      ].map((item) => ({
        ...item,
        onSelect: (editor, value) => {
          insertBlock(editor, value);
        },
      })),
    },
    {
      group: '媒体',
      items: [
        {
          icon: <ImageIcon />,
          label: '图片',
          value: ImagePlugin.key,
        },
        {
          icon: <FilmIcon />,
          label: '视频',
          value: MediaEmbedPlugin.key,
        },
        // {
        //   icon: <PenToolIcon />,
        //   label: 'Excalidraw 图',
        //   value: ExcalidrawPlugin.key,
        // },
      ].map((item) => ({
        ...item,
        onSelect: (editor, value) => {
          if (value === ImagePlugin.key || value === MediaEmbedPlugin.key) {
            openFilePicker();
          } else {
            insertBlock(editor, value);
          }
        },
      })),
    },
    {
      group: '链接&日期',
      items: [
        {
          icon: <Link2Icon />,
          label: '链接',
          value: LinkPlugin.key,
        },
        {
          focusEditor: true,
          icon: <CalendarIcon />,
          label: '日期',
          value: DatePlugin.key,
        },
      ].map((item) => ({
        ...item,
        onSelect: (editor, value) => {
          insertInlineElement(editor, value);
        },
      })),
    },
    {
      group: '布局',
      items: [
        // {
        //   icon: <TableOfContentsIcon />,
        //   label: '目录',
        //   value: TocPlugin.key,
        // },
        {
          icon: <Columns3Icon />,
          label: '分栏卡片',
          value: 'action_three_columns',
        },
      ].map((item) => ({
        ...item,
        onSelect: (editor, value) => {
          insertBlock(editor, value);
        },
      })),
    },
  ];

  return (
    <DropdownMenu modal={false} {...openState} {...props}>
      <DropdownMenuTrigger asChild>
        <ToolbarButton pressed={openState.open} tooltip="插入" isDropdown>
          <div className="flex justify-center items-center bg-[#eee] p-1 rounded-full">
            <PlusIcon />
          </div>
        </ToolbarButton>
      </DropdownMenuTrigger>

      <DropdownMenuContent
        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
        align="start"
      >
        {groups.map(({ group, items: nestedItems }) => (
          <DropdownMenuGroup key={group} label={group}>
            {nestedItems.map(({ icon, label, value, onSelect }) => (
              <DropdownMenuItem
                key={value}
                className="min-w-[180px]"
                onSelect={() => {
                  onSelect(editor, value);
                  focusEditor(editor);
                }}
              >
                {icon}
                {label}
              </DropdownMenuItem>
            ))}
          </DropdownMenuGroup>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
